<template>
  <div>
    <MyElDialog
      v-model:isDialogShow="isDlgShow"
      :dialogTitle="dialogTitle"
      @dialogClosed="dialogClosed"
    >
      <el-form :model="dlgData" label-position="top">
        <el-form-item label="date">
          <el-date-picker
            v-model="dlgData.date"
            type="date"
            placeholder="请选择"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="name">
          <el-input v-model="dlgData.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="content">
          <el-input type="textarea" v-model="dlgData.content" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="status">
          <el-select v-model="dlgData.status" placeholder="">
            <el-option label="启用" value="启用"></el-option>
            <el-option label="禁用" value="禁用"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div>{{ JSON.stringify(dlgData) }}</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleDlgCancel">取消</el-button>
          <el-button type="primary" @click="handleDlgConfirm(dlgData)">确认</el-button>
        </span>
      </template>
    </MyElDialog>
  </div>
</template>

<script setup>
import { reactive, ref, watch, toRefs } from 'vue'

const emits = defineEmits([
  'update:isDialogShow',
  'update:dialogData',
  'handleDlgCancel',
  'handleDlgConfirm',
  'dialogClosed'
])
const props = defineProps({
  dialogTitle: {
    type: String,
    default: '新增表单'
  },
  isDialogShow: {
    type: Boolean,
    default: true
  },
  // dialog填充数据
  dialogData: {
    type: Object,
    default: () => {
      return {
        date: '',
        name: '',
        content: '',
        status: ''
      }
    }
  }
})

const { isDialogShow: isDlgShow, dialogData: dlgData } = toRefs(props)

// 监控父组件显隐控制
watch(
  () => props.isDialogShow,
  val => {
    emits('update:isDialogShow', val)
  },
  { deep: true }
)

// 监控dialog内容变化
watch(
  () => dlgData,
  val => {
    console.log(dlgData, 'dlgData')
    emits('update:dialogData', val)
  },
  { deep: true }
)

/**
 * @description 	Dialog 取消
 */
const handleDlgCancel = () => {
  emits('handleDlgCancel')
}

/**
 * @description 	Dialog 确认表单
 */
const handleDlgConfirm = row => {
  emits('handleDlgConfirm', row)
}

/**
 * @description 	Dialog 关闭动画结束时的回调
 */
const dialogClosed = () => {
  emits('dialogClosed')
}

// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
defineExpose({
  isDlgShow,
  dlgData
})
</script>

<style lang="scss" scoped></style>
